﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../js/jq/jquery.lastest.js"></script>
    <script src="../../js/ko/knockout.lastest.js"></script>
    <script type="text/javascript">
        // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
        function AppViewModel() {
            this.firstName = ko.observable("Bert");
            this.lastName = ko.observable("Bertington");

            //Defining computed values
            this.fullName = ko.computed(function () {
                return this.firstName() + " " + this.lastName();
            }, this);

            //Adding more behavior
            this.capitalizeLastName = function () {
                var currentVal = this.lastName();        // Read the current value
                this.lastName(currentVal.toUpperCase()); // Write back a modified value
            };
        }

        $(function () {
            // Activates knockout.js
            ko.applyBindings(new AppViewModel());
        });
    </script>
</head>
<body>
    <!-- This is a *view* - HTML markup that defines the appearance of your UI -->
    <p>
        First name:
        <input data-bind="value: firstName" />
    </p>
    <p>
        Last name:
        <input data-bind="value: lastName" />
    </p>
    <p>Full name: <strong data-bind="text: fullName"></strong></p>
    <button data-bind="click: capitalizeLastName">Go caps</button>
</body>
</html>